<script setup>
import { ref } from 'vue'
import { getImageByName } from '@/utils/getImage.js'

const baseUrl = import.meta.url

const list = ref([
    {
        name: 'OP01',
        img: '1',
        title: '智能仓储单元',
        status: '1',
        num: '3',
        time: 45
    },
    {
        name: 'OP02',
        img: '2',
        title: '自动加工单元',
        status: '1',
        num: '1',
        time: 45
    },
    {
        name: 'OP03',
        img: '3',
        title: '半成品检测单元',
        status: '1',
        num: '3',
        time: 45
    },
    {
        name: 'OP04',
        img: '4',
        title: '自动装配单元',
        status: '2',
        num: '3',
        time: 45
    },
    {
        name: 'OP05',
        img: '5',
        title: '成品检测单元',
        status: '2',
        num: '3',
        time: 45
    },
    {
        name: 'OP06',
        img: '4',
        title: '自动装配单元',
        status: '2',
        num: '3',
        time: 45
    },
    {
        name: 'OP07',
        img: '4',
        title: '自动装配单元',
        status: '2',
        num: '3',
        time: 45
    }
])
</script>

<template>
    <div class="com-side-card card">
        <div class="com-card-head">
            <h1>设备实时状态监控</h1>
        </div>
        <vue3-seamless-scroll
            :list="list"
            :limitScrollNum="list.length"
            :hover="true"
            :singleHeight="120"
            :singleWaitTime="3000"
            :hover-stop="true"
            class="com-list-content"
        >
            <div class="com-list-item item" v-for="(item, index) in list" :key="index">
                <div class="left">
                    <div class="title">
                        <h2>{{ item.name }}</h2>
                    </div>
                    <img :src="getImageByName(`op${item.img}`, baseUrl)" alt="工位图片" />
                </div>
                <div class="center">
                    <div class="title">
                        <h2>{{ item.title }}</h2>
                    </div>
                    <div class="status">
                        <div>
                            <span>设备状态：</span>
                            <span>
                                <em style="color: #71cd4c" v-if="item.status == '1'">正常</em>
                                <em style="color: #ff5151" v-if="item.status == '2'">异常</em>
                            </span>
                        </div>
                        <div>
                            <span>故障次数：{{ item.num }}次</span>
                        </div>
                    </div>
                    <div class="position">
                        <img src="./assets/img/icon.png" alt="" />
                        <span>系统定位</span>
                    </div>
                </div>
                <div class="right">
                    <div class="dash">
                        <div class="time">{{ item.time }}h</div>
                        <div class="period">作业时长</div>
                    </div>
                </div>
            </div>
        </vue3-seamless-scroll>
    </div>
</template>

<style scoped lang="scss">
.card {
    height: 517px;

    .item {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        .left {
            .title {
                width: 104px;
                height: 24px;
                background: #28e2ff;
                border-radius: 3px 3px 0 0;
                display: flex;
                justify-content: center;
                align-items: center;
                h2 {
                    color: black;
                }
            }

            img {
                width: 104px;
                height: 68px;
            }
        }
        .center {
            width: 105px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 5px;

            .title {
                display: flex;
                justify-content: space-between;

                h2 {
                    font-size: 15px;
                }
            }

            .status {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                em,
                span {
                    font-size: 13px;
                    color: #ffffff90;
                }
            }

            .position {
                cursor: pointer;
                width: 82px;
                height: 24px;
                border-radius: 100px;
                border: 1px solid #28e2ff;
                display: flex;
                align-items: center;
                justify-content: center;
                span {
                    font-size: 13px;
                    color: #28e2ff;
                }
            }
        }
        .right {
            display: flex;
            justify-content: center;
            align-items: center;
            .dash {
                width: 86px;
                height: 85px;
                background: url(./assets/img/bg.png) no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .time {
                    font-size: 30px;
                    color: #ffdc68;
                }
                .period {
                    margin-top: 5px;
                    font-size: 13px;
                    color: #ffffff;
                }
            }
        }
    }
}
</style>
